<template>
	<view class="content">
		<view class="top-box">
			<template v-for="item in top">
				<view class="top-block">
					<text class="number" v-if="item.title !== 'week'">{{item.total}}</text>
					<text v-if="item.title === 'day'">今日用电量</text>
					<!-- <text v-if="item.title === 'week'">本周用电量</text> -->
					<text v-if="item.title === 'month'">本月用电量</text>
				</view>
			</template>
		</view>
		<view class="title">
			设备数据
		</view>
		<view class="table">
			<view class="flex-row th">
				<view class="flex-1">
					编号
				</view>
				<view class="flex-2">
					地址
				</view>
				<view class="flex-2">
					设备名称
				</view>
				<view class="flex-1">
					操作
				</view>
			</view>
			<template v-for="item in list">
				<view class="flex-row td">
					<view class="flex-1">
						{{item.id}}
					</view>
					<view class="flex-2">
						{{item.factoryBranchName + '/' + item.factoryRoomName}}
					</view>
					<view class="flex-2">
						{{item.name}}
					</view>
					<view class="flex-1">
						<text class="blue" @tap="toDetail(item)">查看</text>
					</view>
				</view>
			</template>
			<view class="flex-row td" v-if="!list.length">
				<view class="flex-1">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				top: [],
				list: []
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getTop()
			this.getData()
		},
		methods: {
			getTop(){
				this.$api.get('api/mobile/getDayWeekMonth',{id: this.id}).then(res => {
					this.top = res.result
				})
			},
			getData(){
				this.$api.get('api/mobile/getDeviceListUser',{id: this.id}).then(res => {
					this.list = res.result
				})
			},
			toDetail(item){
				uni.navigateTo({
					url: `detail?id=${item.id}&name=${item.name}`
				});
			}
		}
	}
</script>

<style lang="scss">
.content{
	display: flex;
	flex-direction: column;
	padding: 20rpx 10rpx;
	.top-box{
		width: 100%;
		padding: 40rpx;
		border: 2rpx solid #00ffff;
		border-radius: 12rpx;
		display: flex;
		box-sizing: border-box;
		.top-block{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $uni-font-size-30;
			flex: 1;
			.number{
				font-size: $uni-font-size-32;
				height: 80rpx;
			}
		}
	}
	.title{
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		font-size: $uni-font-size-32;
		font-weight: 600;
	}
	.table{
		display: flex;
		flex-direction: column;
		font-size: $uni-font-size-28;
		.th{
			align-items: center;
			background-color: #efefef;
		}
		.td{
			align-items: center;
			border-bottom: 1rpx solid #efefef;
		}
		.flex-1{
			padding: 20rpx 8rpx;
			text-align: center;
			flex: 1;
		}
		.flex-2{
			padding: 20rpx 8rpx;
			text-align: center;
			flex: 2;
		}
		.blue{
			color: #0026ff;
		}
	}
}
</style>
